<template>
  <div flex-1 overflow-hidden ref="el">
    <a-tabs
      class="h-full"
      tab-position="left"
      v-model:active-key="currentCondition"
    >
      <a-tab-pane
        v-for="item in optionData.conditions"
        :key="item.condition_name"
      >
        <template #tab>
          <div
            class="max-w-200px overflow-hidden text-ellipsis"
            :title="item.alias_name || item.condition_name"
          >
            <CheckCircleFilled text-success v-if="item.options.length" />
            {{ item.alias_name || item.condition_name }}
          </div>
        </template>
        <Option :rightData="rightData" :data="item" :row-h="height"></Option>
      </a-tab-pane>
    </a-tabs>
  </div>
  <div text-center mt-4>
    <a-space>
      <a-button type="primary" @click="goPrev">上一步</a-button>
      <a-button type="primary" @click="goNext" :disabled="isDisabled"
        >下一步</a-button
      >
      <a-button type="primary" @click="save" :disabled="isDisabled">
        保存
      </a-button>
      <a-button @click="reset">重置</a-button>
    </a-space>
  </div>
</template>

<script lang="ts" setup>
import type { JobStep } from '../Step';
import { event } from './event';
import { CheckCircleFilled } from '@ant-design/icons-vue';
import type {
  FetchProcess,
  JumpType,
  MatchData,
  OptionCondition,
  OptionData,
  UpdateProcess,
} from '../type';

import Option from './Option.vue';

const props = defineProps<{
  stepData: JobStep;
  fetchProcess: FetchProcess;
  updateProcess: UpdateProcess;
}>();

const emits = defineEmits<{
  jump: [params: JumpType];
}>();

const { stepData, fetchProcess, updateProcess } = toRefs(props);

const currentCondition = ref('');

const conditionData = computed(() => stepData.value.prev!.data as MatchData);
// const resultData = computed(() => stepData.value.next?.data as ResultData);
const optionData = ref<OptionData>(cloneDeep(stepData.value.data));
const init = () => {
  if (!optionData.value.conditions) {
    optionData.value.conditions = [];
  }
  const map: Map<string, OptionCondition> = new Map();
  optionData.value.conditions.forEach(item => {
    map.set(item.condition_name, item);
  });
  let list: OptionCondition[] = [];
  conditionData.value.conditions.forEach(item => {
    list.push({
      condition_name: item.condition_name,
      alias_name: item.alias_name,
      options: map.get(item.condition_name)?.options || [],
    });
  });
  optionData.value.conditions = list;
  if (list.length) {
    currentCondition.value = list[0].condition_name;
  }
};

const isDisabled = computed(() => {
  return !optionData.value.conditions?.some(item => !!item.options.length);
});

onMounted(() => {
  // runDiff();
  init();
  event.on('modify', () => {
    stepData.value.isEdit = true;
  });
  event.on('remove', () => {
    stepData.value.isEdit = true;
    stepData.value.next = undefined;
  });
});
onBeforeUnmount(() => {
  event.all.clear();
});

const rightData = computed(() => {
  return conditionData.value.conditions.find(
    item => item.condition_name == currentCondition.value
  );
});

const goPrev = () => {
  emits('jump', {
    process_name: 'CONDITION_RELATION',
    callback: () => save(true),
  });
};
const goNext = () => {
  emits('jump', {
    process_name: 'RESULT_ADJUST',
    callback: save,
    isNext: true,
  });
};
const save = async show => {
  stepData.value.updateStep('OPTION_RELATION', optionData.value);
  const res = await updateProcess.value();
  if (res.code == 'ok') {
    stepData.value.isEdit = false;
    show && message.success('保存成功');
  } else {
    // message.error(res.message);
  }
};

const reset = async () => {
  await fetchProcess.value('OPTION_RELATION');
  optionData.value = cloneDeep(stepData.value.data);
  init();
  // runDiff();
};

const el = ref();
const { height } = useElementSize(el);
defineExpose({
  change: process_name => {
    emits('jump', {
      process_name,
      callback: save,
    });
  },
});
</script>
